<template>
  <div class="gs-footer">
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="首页" @click="test">
        <i class="iconfont home"></i>
        <br>首页
      </mt-tab-item>
      <mt-tab-item id="想法">
        <i class="iconfont idea"></i>
        <br>想法
      </mt-tab-item>
      <mt-tab-item id="会员">
        <i class="iconfont member"></i>
        <br>会员
      </mt-tab-item>
      <mt-tab-item id="通知">
        <i class="iconfont notice"></i>
        <br>通知
      </mt-tab-item>
      <mt-tab-item id="我的">
        <i class="iconfont my"></i>
        <br>我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "FooterPage",
  data() {
    return {
      selected: "首页"
    };
  },
  methods: {
    test(){
      console.log(11);
    }
  },
  computed: {},
  // 监听
  watch: {
    selected(val, oldVal) {
      let vm = this;
      // 这里就可以通过val的值变更来确定跳转的页面
      switch (val) {
        case "首页":
          vm.$router.push("/");
          break;
        case "想法":
          vm.$router.push("/Idea");
          break;
        case "会员":
          // vm.$router.push("/page4");
          break;
        case "通知":
          // vm.$router.push("/page5");
          break;
        case "我的":
          // vm.$router.push("/page6");
          break;
      }
    }
  },
  created() {
    const vm = this;
  }
};
</script>

<style>
</style>
